// components/navcon.vue
<template>
  <div>
    <el-menu default-active="2" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
      <el-button type="" class="bottoning">
        <img src="@/assets/img/sq.png" alt="" @click="toggle(collapsed)" v-if="collapsed">
        <img src="@/assets/img/show.png" alt="" @click="toggle(collapsed)" v-else>
      </el-button>
      <router-link style="margin-top:10px" class="logobutton"  to="/"> 
        <img src="@/assets/img/logo.png" alt="" class="logo" >
      </router-link>
      
      <el-submenu index="2" class="submenu" >
        <!-- 分组标题名称 -->
       
        <template slot="title"> <i class="el-icon-user-solid">&nbsp;</i>欢迎&nbsp;{{username}}&nbsp;登录</template>
        <!-- <el-menu-item index="2-1">设置</el-menu-item> -->
        <!-- <el-menu-item index="2-2" @click="()">个人中心</el-menu-item> -->
        <el-menu-item index="2-1" @click="exit()">退出</el-menu-item>
      </el-submenu>
     
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // path:Location.path.split("/")[0],
      collapsed:true, 
      username:sessionStorage.getItem('username')||localStorage.getItem('username')  
    }
  },
  methods: {  
    // tiaozhao(){
    //   this.$router.push("/")
    // },
    // 退出登录
    exit() {
      this.$confirm('退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          setTimeout(() => {
            this.$store.commit('exit')            
            this.$router.push({ path: '/login' })
            this.$message({
              type: 'success',
              message: '已退出登录!'
            })
          }, 1000)     
      
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 切换显示
    toggle(showType){
      this.collapsed=!showType;
      this.bus.$emit('switch',this.collapsed)
    }
  },
}
</script>
<style scoped>
.logobutton{
  /* height: ; */
  /* vertical-align: middle; */
  position: relative;
  left:20px;
  /* top: 10px; */
  /* transform: translateY(-50%) */

}
.bottoning {
  height: 60px;
  background-color: transparent;
  border: none;
}
/* .showing {
  width: 26px;
  height: 26px;
} */
.submenu {
  float: right;  
}
/* 图标的大小 */
.logo {
  width: 24px;
  height: 24px; 
  /* vertical-align: middle; */
  }
  .el-icon-user {
    color: #FFF;
  }
  .el-icon-user-solid {
    color: #fff;
    font-size: 20px;
  }
</style>